<template>
  <div class="content">
    <div class="checkall flex-end">
      <div class="export cp" @click="exportAll">导出</div>
    </div>

    <table class="Datatable">
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="checked" v-on:click="checkedAll" />
          </th>
          <th>姓名</th>
          <th>手机号码</th>
          <th>头像</th>
          <th>状态</th>
          <th>注册时间</th>
          <th>最近登录时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="total>0">
        <tr v-for="item in tableData" :key="item.userId">
          <td>
            <input type="checkbox" v-model="checkboxList" :value="item.userId" />
          </td>
          <td>{{ item.userName }}</td>
          <td>{{ item.userPhone }}</td>
          <td><div class="pic"><img :src="item.imgSrc" alt=""></div></td>
          <td><span :class="[item.userState==='启用'?'qiyong':'jingyong']">{{item.userState}}</span></td>
          <td>{{ item.userRegisterTime?setLocalTime(item.userRegisterTime):item.userRegisterTime }}</td>

          <td>{{ item.userLastLoginTime?setLocalTime(item.userLastLoginTime):item.userLastLoginTime }}</td>
          <td class="operation">
            <span class="ck cp blue" @click="searchDetail(item.userPhone)">查看</span>
            <promptBox
              @cancel="promptBoxId = 0"
              @confirm="confirm(item.userId)"
              v-show="promptBoxId === item.userId"
            ></promptBox>
            <span v-if="item.userState==='启用'" class="cp green jingyong" @click="promptBox(item.userId,item.userPhone)">禁用</span>
             <span v-else class="cp green " @click="qiyong(item.userPhone)">启用</span>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="8">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <div class="flex-end">
      <el-pagination
        v-if="total>0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import promptBox from './promptBox.vue'
import getUTCTime from '@/utils/tools/getUTCTime'
import file from '@/utils/tools/fileExport'
// import downloadImg from '@/utils/tools/downloadImg'

export default {
  components: {
    promptBox
  },
  data () {
    return {
      // currentPage: 1,
      // size: 10,
      checkboxList: [],
      checked: false,
      visible: false,
      promptBoxId: 0

    }
  },
  computed: {
    tableData () {
      return this.$store.state.userManage.tableData
    },
    total () {
      return this.$store.state.userManage.totalNum.total
    },
    currentPage: {
      get: function () {
        return this.$store.state.userManage.params.page + 1
      },
      set: function (newValue) {
        this.$store.commit('userManage/set_page', newValue)
      }
    },
    size: {
      get: function () {
        return this.$store.state.userManage.params.size
      },
      set: function (newValue) {
        this.$store.commit('userManage/set_size', newValue)
      }
    }
  },
  created () {
    this.$store.dispatch('userManage/getTableData').then().catch(err => {
      this.$message({
        type: 'error',
        message: err,
        duration: 1000
      })
    })
  },
  methods: {
    handleCurrentChange (val) {
      this.$store.commit('userManage/set_page', val)
      this.$store.dispatch('userManage/getTableData')
    },
    handleSizeChange (size) {
      this.$store.commit('userManage/set_size', size)
      this.$store.dispatch('userManage/getTableData')
    },
    checkedAll () {
      // console.log(this.checked)
      if (this.checked) {
        // 实现反选
        this.checkboxList = []
      } else {
        // 实现全选
        this.checkboxList = []
        this.tableData.forEach((item) => {
          this.checkboxList.push(item.userId)
        })
      }
    },

    searchDetail (id) {
      sessionStorage.setItem('id', id)
      this.$router.push({
        path: '/userManage/main/detail'
      })
    },
    promptBox (id, phone) {
      this.promptBoxId = id
      sessionStorage.setItem('phone', phone)
    },
    confirm (id) {
      this.promptBoxId = 0
      // alert(id)
      // 后续操作
    },
    setLocalTime (time) {
      return this.$moment(+new Date(time)).format('YYYY-MM-DD HH:mm:ss')
    },
    exportAll () {
      if (this.checkboxList.length !== 0) {
        const listId = this.checkboxList.join(',')
        const timeZone = -getUTCTime.getUTCTime(new Date())
        this.$store.dispatch('userManage/exportUserData', { listId, timeZone }).then(res => {
          file.fileExport(res, '用户表')
        })
      } else {
        this.$message({
          type: 'error',
          message: '请先勾选',
          duration: 1000
        })
      }
    },
    qiyong (phone) {
      // console.log(phone, 1)
      this.$store.dispatch('userManage/stopUser', { phone }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message)
          this.$store.dispatch('userManage/getTableData')
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err,
          duration: 1000
        })
      })
    }
  },
  watch: {
    // 深度 watcher
    checkboxList: {
      handler: function (val, oldVal) {
        if (this.checkboxList.length === this.tableData.length && this.checkboxList.length !== 0) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      deep: true
    },
    tableData: {
      handler: function (val, oldVal) {
        this.checked = false
        this.checkboxList = []
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 674px;
  padding: 0 24px;
  background-color: #fff;
  padding-top: 1px;
  margin-top: 20px;
  border-radius: 8px;
  position: relative;
  padding-bottom: 120px;
  table {
    th,
    td {
      &:nth-child(1) {
        width: 60px;
      }
      &:nth-child(2) {
        width: 140px;

      }
      &:nth-child(3) {
        width: 190px;
      }
      &:nth-child(4) {
        width: 190px;
      }
      &:nth-child(5) {
        width: 170px;
      }
      &:nth-child(6) {
        width: 220px;
      }
      &:nth-child(7) {
        width: 220px;
      }
    }
  }
  .operation {
    position: relative;
    overflow: visible;
  }
  .qiyong{
    color: #39BD65;
  }
  .jingyong{
    color: #F05656;
  }
  .pic{
    width: 42px;
    height: 42px;
    display: inline-block;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
